<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>曲线添加</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="layui-form" lay-filter="">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>曲线添加</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线类型:</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="curvetype" lay-filter="curvetype">
                        <option value="0">请选择</option>
                        <option value="1">深度</option>
                        <option value="2">时间</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线名称:</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="curvename" class="from-control" lay-filter="curvename" class="layui-select"
                        lay-search></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段别名:</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" id="parametercn" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="margin-top: 12px;">
                    <span id="curveinfo" style="font-size: 16px;"></span>
                    <input type="text" id="tablename" hidden value="表名">
                    <input type="text" id="keys" hidden value="Key值">
                    <input type="text" id="parameter" hidden value="字段">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内部点颜色:</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" readonly class="layui-input"
                        value="#000000" id="insidecolor">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test1"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最外点颜色:</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" readonly class="layui-input"
                        value="#ff0000" id="outercolor">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test2"></div>
                </div>
            </div>
        </div>

    </form>
    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type='text/javascript'>
        var $;
        var form;
        var colorpicker;
        layui.use(['form', 'colorpicker'], function () {
            $ = layui.$;
            form = layui.form;
            colorpicker = layui.colorpicker;

            //身份验证
            if (getoken != false) {
                var curvetypes;//曲线类型
                //曲线类型的监听事件
                form.on('select(curvetype)', function (data) {
                    curvetypes = data.value;
                    //获取曲线信息
                    $.ajax({
                        type: "get",
                        url: api_address + '/curve/getcur',
                        async: false,
                        headers: {
                            Authorization: getoken
                        },
                        contentType: 'application/json;',
                        success: function (res) {
                            if (res.code == 200) {
                                list = res.data;
                                $("#curvename").empty();
                                for (var i = 0; i < list.length; i++) {
                                    if (list[i].curveType == curvetypes) {
                                        var option = "<option value=\"" + list[i].curveName + "\"";
                                        option += ">" + list[i].curveName + "</option>"; //动态添加数据
                                        $("#curvename").append(option);
                                    }
                                }
                                form.render();
                            }
                        }
                    });
                })

                //内部点颜色
                colorpicker.render({
                    elem: '#test1'
                    , color: '#000000'
                    , done: function (color) {
                        $('#insidecolor').val(color);
                    }
                });

                //外部点颜色
                colorpicker.render({
                    elem: '#test2'
                    , color: '#ff0000'
                    , done: function (color) {
                        $('#outercolor').val(color);
                    }
                });

                //曲线名称的监听事件
                form.on('select(curvename)', function (data) {
                    var vs = $("#curvename option:checked").val();
                    for (var i = 0; i < list.length; i++) {
                        if (vs == list[i].curveName && list[i].curveType == curvetypes) {
                            $("#tablename").val(list[i].tableName);
                            var param = list[i].params.split(',');//字符串变为数组
                            $("#keys").val(param[param.length - 2]);//取出Key值
                            $("#parameter").val(param[param.length - 1]);//取出最后一个参数
                            $("#parametercn").val(param[param.length - 1]);
                            document.getElementById("curveinfo").innerText = "(" + list[i].tableName + ":" + param[param.length - 1] + ")";
                        }
                    }
                })
            }
        });
    </script>

</body>

</html>